<template>
  <div class="Box">
    <el-calendar>
      <template slot="dateCell" slot-scope="{ data }">
        <div
          slot="reference"
          class="div-Calendar"
          @click="calendarOnClick(data)"
        >
          <p :class="data.isSelected ? 'is-selected dates' : 'dates'">
            <span
              :class="
                (data.day >= startTime && data.day <= endTime) ||
                data.day == startTime
                  ? 'active'
                  : ''
              "
              >{{ data.day.split("-").slice(2).join("-") }}</span
            >
          </p>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      nowDate: new Date(),
      clickcount: 0,
      clickitem: "",
    };
  },
  methods: {
    calendarOnClick(e) {
      this.clickcount++;
      this.clickitem = e.day;
      //开始日期
      if (this.clickcount % 2 == 1) {
        this.startTime = this.clickitem;
        this.endTime = "";
      } else {
        this.endTime = this.clickitem;
        if (this.startTime > this.endTime) {
          this.endTime = this.startTime;
          this.startTime = this.clickitem;
        }
      }
      console.log(this.startTime);
      console.log(this.endTime);
    },
  },
};
</script>
<style scoped lang='scss'>
.Box {
  >>> .el-calendar__header {
    justify-content: center;
    user-select: none;
    // display: none;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    padding: 0;
    .el-calendar__title {
      margin-bottom: 15px;
    }
    .el-button-group {
      display: flex;
    }
  }
  >>> .el-calendar-table .el-calendar-day {
    height: 10px;
    text-align: center;
  }

  >>> .el-calendar__body {
    padding: 10px 5px 20px;
  }
  >>> thead {
    font-size: 12px;
    th {
      padding: 0;
    }
  }
  >>> .el-calendar-table tr td {
    border: 0;
    user-select: none;
    // line-height: 20px;
    font-size: 14px;
  }
  >>> .el-calendar-table .el-calendar-day {
    padding: 0;
  }
  >>> .el-calendar-table td.is-selected {
    background-color: transparent;
  }
  >>> .el-calendar-table .el-calendar-day:hover {
    background-color: transparent;
  }

  >>> .el-checkbox__label {
    white-space: initial;
    padding: 10px;
  }
  .is-selected {
    background: #54ad8d;
    display: inline-block;
    width: 20px;
    border-radius: 2px;
    color: #fff;
  }
  .active {
    background: rgb(24, 144, 255);
    display: inline-block;
    width: 20px;
    border-radius: 2px;
    color: #ffffff;
  }
}
.dates {
  margin-top: 12px;
}
</style>